<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Events</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.fx.js"></script>
        <script src="../../source/js/nova.panelbar.js"></script>
        <script src="../js/nova.console.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Events</div>
        <!-- description -->
        <div id="example" class="n-content">
            <ul id="panelbar">
                <li class="n-state-active">
                    First Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Second Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Third Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Fourth Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Fifth Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Ajax Item
                    <div></div>
                </li>
                <li>
                    Error Item
                    <div></div>
                </li>
            </ul>
        </div>
        <script>
            function onSelect(e) {
                novaConsole.log("Selected: " + $(e.item).find("> .n-link").text());
            };

            function onExpand(e) {
                novaConsole.log("Expanded: " + $(e.item).find("> .n-link").text());
            };

            function onCollapse(e) {
                novaConsole.log("Collapsed: " + $(e.item).find("> .n-link").text());
            };

            function onContentLoad(e) {
                novaConsole.log("Content loaded in <b>"+ $(e.item).find("> .n-link").text() +
                                 "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
            };

            function onError(e) {
                novaConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
            };

            $("#panelbar").novaPanelBar({
                select: onSelect,
                expand: onExpand,
                collapse: onCollapse,
                contentLoad: onContentLoad,
                error: onError,
                contentUrls: [ , , , , , "ajax/ajaxContent1.html", "error.html" ]
            });
        </script>
        <div class="console"></div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>
